<template>
  <div class="panel">
    <el-tooltip class="item" effect="dark" :content="msg.inOut?'公众号发出的消息':'来自用户的消息'" placement="right">
      <el-tag v-if="msg.inOut" size="mini" class="margin-right el-icon-upload2" type="info" />
      <el-tag v-else size="mini" class="margin-right el-icon-download" />
    </el-tooltip>
    <span class="panel-content">
      <span v-if="msg.msgType=='text'" v-html="msg.detail.content" />
      <span v-else-if="msg.msgType=='event'">
        <el-tag size="mini" type="warning" effect="plain">事件</el-tag>
        <el-tag size="mini" type="info" effect="plain">{{ msg.detail.event }}</el-tag>
        {{ msg.detail.eventKey }}
      </span>
      <span v-else-if="msg.msgType=='transfer_customer_service'">
        <el-tag size="mini" type="warning" effect="plain">事件</el-tag>
        <el-tag size="mini" type="info" effect="plain">消息转客服</el-tag>
      </span>
      <span v-else>
        <el-tag size="mini" effect="plain">{{ XmlMsgType[msg.msgType] }}</el-tag>
        后台不支持预览
      </span>
    </span>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'WxMsgPreview',
  props: {
    msg: Object
  },
  computed: mapState({
    XmlMsgType: state => state.message.XmlMsgType
  })
}
</script>
<style scoped>
.panel,.panel a{
    color: #999;
    word-break: break-all;
}
</style>
